トップページの作成例
今週は、これまでに紹介してきた「文字の表示と改行」「文字の配置」「画像の表示」「リンクの作成」を使って実際にトップページを作成してみましょう。わずかなタグだけでもホームページの作成は可能です。この程度のホームページであれば、初めての方も気軽に作成できると思いますよ。

→ タイトルの作成
 
まずは、タイトルの文字を作成します。ここでは、ブラウザ枠の上部に表示されるHP名と実際に画面に表示されるタイトル文字を作成できればOKです。HP名は「TITLE」〜「/TITLE」タグの間にHP名を入力するだけ。タイトル文字の表示は「FONT」タグを使用し、文字サイズを最大の「7」に指定し、「DIV」タグでタイトル文字の行揃えが中央揃えとなるように設定しておきす。なお、画面上部の余白は「BODY」タグの直後に「BR」タグ(改行)を記述すると調整できます。
<HTML>
<HEAD>
  <TITLE>憧れの南の島</TITLE>
</HEAD>

<BODY>
<BR>
<DIV align=center>
  <FONT size=7>憧れの南の島</FONT>
</DIV>
</BODY>

</HTML>


→ 背景色と画像の表示
 
これでタイトル文字が作成できました。続いては、メイン画像をタイトル文字の下に配置しましょう。この画像は、タイトル文字を改行(「BRタグ」)したあと、「IMG」タグを使って配置します。また、画像の下には文字サイズ「3」で簡単なホームページの紹介文を記述しておきます。このほか、ここでは「BODY」タグにbgcolor属性を追加し、ページ全体の背景色を「#FFCC66」に指定しています。
<HTML>
<HEAD>
  <TITLE>憧れの南の島</TITLE>
</HEAD>

<BODY>
<BR>
<DIV align=center>
  <FONT size=7>憧れの南の島</FONT><BR>
  <IMG src=image.jpg><BR>
  <FONT size=3>このホームページでは、南の島の魅力を紹介します。</FONT><BR>
</DIV>
</BODY>

</HTML>


→ リンクの作成
 
ホームページは、トップページだけでは成り立ちません。最後に、各コンテンツページへのリンクを作成しておきましょう。これは「A」タグを使ってリンク先のHTMLファイルを指定すればOKです。今回の例では、以下のような3つのリンクを作成してみました。なお、このときリンク先ページのHTMLファイルを用意しておくのを忘れないでください。リンク先のページはトップページを応用して作成しても構いませんし、とりあえずは「工事中」としておく方法もあります。完成したトップページは「index.htm」という名前を付け、iswebにアップロードします(同時に、画像ファイルやリンク先のコンテンツページのHTMLファイルもアップロードしておきます)。これでトップページは完成です。
<HTML>
<HEAD>
  <TITLE>憧れの南の島</TITLE>
</HEAD>

<BODY>
<BR>
<DIV align=center>
  <FONT size=7>憧れの南の島</FONT><BR>
  <IMG src=image.jpg><BR>
  <FONT size=3>このホームページでは、南の島の魅力を紹介します。</FONT><BR>
  <BR>
  <BR>
  <FONT size=3>
    <A href=photo.htm>南の島の写真</A><BR>
    <A href=osusume.htm>オススメの南の島は?</A><BR>
    <A href=sports.htm>南の島で楽しむマリンスポーツ</A><BR>
  </FONT>
</DIV>
</BODY>

</HTML>


yVoC[UNLIMIT1~] ECir|C Yahoo yV LINEf[^[z500~`I


z[y[W NWbgJ[h COiq O~yz COsI COze